<template>
  <div class="musicList" v-if="showmusicList">
    <div class="bg" @click="hidemusicList"></div>
    <van-swipe
      class="my-swipe"
      :loop="false"
      indicator-color="#9977f7"
      indicator-active-color="#ccc"
      style="transform: translateY(250px)"
    >
      <van-swipe-item class="item">
        <div class="nowList">
          <h3>当前歌单</h3>
          <ul>
            <li v-for="item in nowList" :key="item.id" @click="play(item)">
              <div>
                <p>{{ item.name }}-</p>
              <span v-for="(art, i) in item.ar" :key="i"
                >{{ art.name }}
                <span v-if="i != item.ar.length - 1">/</span></span
              >
              </div>
              <van-icon name="cross" />
            </li>
          </ul>
        </div>
      </van-swipe-item>
      <van-swipe-item class="item">
        <div class="history">
          <h3>历史歌单</h3>
          <ul>
            <li v-for="item in historyList" :key="item.id" @click="play(item)">
              <div>
                <p>{{ item.name }}-</p>
                <span v-for="(art, i) in item.ar" :key="i"
                  >{{ art.name }}
                  <span v-if="i != item.ar.length - 1">/</span></span
                >
              </div>
              <van-icon name="cross" />
            </li>
          </ul>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  props: {
    showmusicList: { type: Boolean },
  },
  methods: {
    ...mapMutations(["xplaysong"]),
    play(item) {
      this.xplaysong(item);
    },
    hidemusicList() {
      this.$emit("hide", false);
    },
  },
  computed: {
    ...mapState(["nowList"]),
    ...mapState(["historyList"]),
  },
};
</script>
<style lang="scss" scoped>
.musicList {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nowList,
  .history {
    padding: 10px 30px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1em;
    height: 350px;
    z-index: 99;
    overflow: scroll;
    h3 {
      font-size: 16px;
      color: #9917f7;
    }
    ul {
      li {
        font-size: 12px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >div {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: flex;
          
          align-items: center;
          width: 90%;
          p {
            flex: 0;
          }
          span {
            flex: 0;
          }
        }
        i {
          flex-grow: 2;
          text-align: right;
        }
      }
    }
  }
}
.item {
}
</style>